<template>
  <div
  class="palette-task-node"
  :class="isActive? 'active-select-node' : ''"
  @dblclick="resetName"
  @click="selectElement"
  @mouseenter="edgeSelectElement">
  <div class="task-node-name">
      <div v-if="!isHidde"> {{ name }} </div>
      <div v-if="isHidde">
        <el-input v-model="name" type="textarea" @blur="resetName"></el-input>
      </div>
    </div>
    <svg-icon icon-class="task" :size="6"></svg-icon>
    <TaskProperty :visible="taskPropertyConfig.visible" :graph="taskPropertyConfig.graph" :nodeId="taskPropertyConfig.nodeId"/>
  </div>
</template>
<script>
import TaskProperty from './components/TaskProperty.vue'

export default {
  name: 'TaskNode',
  inject: ['getNode'],
  components: {
    TaskProperty
  },
  data() {
   return {
    id: null,
    name: '任务',
    isHidde: false,
    isActive: true,
    graph: null,
    selectNodeFun: null,
    parent: null,
    taskPropertyConfig : {
      visible: false,
      nodeId: null,
      graph: null
    },
    attrs: {
      userId: null
    }
   }
  },
  mounted() {
    const node = this.getNode()
    if(!node) return
    // 监听节点属性值变化
    node.on('change:data', ({ current }) => {
      const { id, isActive,  graph, selectNodeFun, $parent, openProperty, taskData} = current
      this.id = id
      this.isActive = isActive
      this.graph = graph
      this.selectNodeFun = selectNodeFun
      this.parent = $parent()
      if(openProperty != undefined) {
        this.openPropertySetting(openProperty)
      }
      if(taskData != undefined && taskData) {
        this.name = taskData.username
        this.attrs.userId = taskData.userId
      }
    })
  },
  watch: {
    isActive: {
      async handler(val) {
        if(val !== undefined ) {
          const node = this.getNode()
          if(!val) {
            if(this.parent) {
              this.parent.nodeHiddenPort(node)
            }
          }else {
            if(this.parent) {
              if(this.parent) {
                this.parent.nodeShowPort(node)
              }
            }
          }
        }
      }
    }
  },
  methods: {
    // 重置名称
    resetName() {
      this.isHidde = !this.isHidde
    },

    // 选择节点
    selectElement() {
      // 选择当前节点
      this.$antProcess.selectCurrentProcessNode(this.graph, this.id)

      // 取消选择的节点
      this.$antProcess.cancelNoCurrentSelectNode(this.graph, this.id)
      if(this.selectNodeFun && typeof this.selectNodeFun === 'function' ){
        this.selectNodeFun(this.id, this.graph, 'task')
      }
    },

    edgeSelectElement() {
      setTimeout(()=> {
        const node = this.parent.currentSelectNode
        const nodeType = node.prop('attrs/type')
        if(nodeType && nodeType === 'edge') return

        // 选择当前节点
        this.$antProcess.selectCurrentProcessNode(this.graph, this.id)
      }, 250)
    },

    // 弹出节点设置属性界面
    openPropertySetting(visible) {
      this.taskPropertyConfig.visible = visible
      this.taskPropertyConfig.nodeId = this.id
      this.taskPropertyConfig.graph = this.graph
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/process.scss';

.palette-task-node {
  position: relative;
  width: 95px;
  height: 60px;
  display: flex;
  justify-content: flex-start;

  .task-node-name {
    color: black;
    font-weight: 500;
    position: absolute;
    top: 30%;
    width: 100%;
    text-align: center;
  }

  .svg-icon {
    color: #409EFF;
    margin-top: -19px;
  }
}
</style>